<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.51">
    <script>
      (function() {
        const userMode = localStorage.getItem('vuepress-reco-color-scheme') || 'auto';
        const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (userMode === 'dark' || (userMode === 'auto' && systemDarkMode)) {
          document.documentElement.classList.toggle('dark', true);
        }
      })();
    </script>
    <link rel="icon" href="/blog/images/logo.png"><link rel="stylesheet" href="/blog/css/common.scss"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><script language="javascript" type="text/javascript" src="/blog/js/jquery.min.js"></script><title>使用预加载脚本 | hhのBlog</title><meta name="description" content="A blog about work and life">
    <link rel="modulepreload" href="/blog/assets/app.af94fc38.js"><link rel="modulepreload" href="/blog/assets/20221115.html.5e544c67.js"><link rel="modulepreload" href="/blog/assets/20221115.html.324de47f.js"><link rel="prefetch" href="/blog/assets/index.html.66bbb558.js"><link rel="prefetch" href="/blog/assets/demo.html.5b7805fb.js"><link rel="prefetch" href="/blog/assets/20221108.html.f09e60bb.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111301.html.ec3c03ed.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111302.html.f6e335a9.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111303.html.c0dc6265.js"><link rel="prefetch" href="/blog/assets/CSS_2022111401.html.5f0453af.js"><link rel="prefetch" href="/blog/assets/20221108.html.4bd4ca47.js"><link rel="prefetch" href="/blog/assets/20221116.html.0d3a3d59.js"><link rel="prefetch" href="/blog/assets/js01example.html.7d266980.js"><link rel="prefetch" href="/blog/assets/js01基础.html.0408303d.js"><link rel="prefetch" href="/blog/assets/js02域名.html.2f781f87.js"><link rel="prefetch" href="/blog/assets/js03保留小数.html.52d104e4.js"><link rel="prefetch" href="/blog/assets/js04常用正则.html.91ba30f3.js"><link rel="prefetch" href="/blog/assets/js05定时器.html.3304c7db.js"><link rel="prefetch" href="/blog/assets/01相关命令.html.d137a3a8.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111301.html.a182f227.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111302.html.da1bce3a.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111303.html.d48c88c8.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111304.html.82c5514a.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111201.html.440c0e4b.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111202.html.e6a8a1db.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111203.html.f1426fe0.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111204.html.e10b7300.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111205.html.4103afd7.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111206.html.d2a54f87.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111207.html.3e95d323.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111208.html.e09e295e.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111209.html.2b200f73.js"><link rel="prefetch" href="/blog/assets/Vue3_2022111301.html.21919b21.js"><link rel="prefetch" href="/blog/assets/Vue_2022111301.html.ef40b3e0.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111301.html.86e597e2.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111302.html.7e66ee69.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111303.html.631f3db6.js"><link rel="prefetch" href="/blog/assets/vue2-10-下载文件流.html.f941e773.js"><link rel="prefetch" href="/blog/assets/2023.html.9b68f9e4.js"><link rel="prefetch" href="/blog/assets/info.html.a848c235.js"><link rel="prefetch" href="/blog/assets/guide.html.e425151d.js"><link rel="prefetch" href="/blog/assets/前端技术集合.html.cf2a3b37.js"><link rel="prefetch" href="/blog/assets/index.html.d2d3b8ef.js"><link rel="prefetch" href="/blog/assets/01简介.html.40ba5a67.js"><link rel="prefetch" href="/blog/assets/Button.html.8c129817.js"><link rel="prefetch" href="/blog/assets/api.html.e0d147e4.js"><link rel="prefetch" href="/blog/assets/home.html.e1e35d1b.js"><link rel="prefetch" href="/blog/assets/home1.html.e4c04026.js"><link rel="prefetch" href="/blog/assets/home2.html.58a624a1.js"><link rel="prefetch" href="/blog/assets/plugin.html.b944638b.js"><link rel="prefetch" href="/blog/assets/theme.html.5ff8341a.js"><link rel="prefetch" href="/blog/assets/info.html.de54f66c.js"><link rel="prefetch" href="/blog/assets/mac上使用iterm2.html.93ceff56.js"><link rel="prefetch" href="/blog/assets/账号网站合集.html.8f9d6378.js"><link rel="prefetch" href="/blog/assets/面试题2022111401.html.475fb69e.js"><link rel="prefetch" href="/blog/assets/info.html.3ee938b6.js"><link rel="prefetch" href="/blog/assets/overtime.html.a3b609ca.js"><link rel="prefetch" href="/blog/assets/password.html.f40ffe93.js"><link rel="prefetch" href="/blog/assets/project.html.e6805471.js"><link rel="prefetch" href="/blog/assets/实验室检测.html.8cf7547b.js"><link rel="prefetch" href="/blog/assets/智慧检测平台.html.dd52a4be.js"><link rel="prefetch" href="/blog/assets/跨维产品菜单整理20230203.html.450b6471.js"><link rel="prefetch" href="/blog/assets/404.html.98e87f94.js"><link rel="prefetch" href="/blog/assets/index.html.72ac4063.js"><link rel="prefetch" href="/blog/assets/index.html.8cbdf524.js"><link rel="prefetch" href="/blog/assets/index.html.ce338eac.js"><link rel="prefetch" href="/blog/assets/index.html.73c4a578.js"><link rel="prefetch" href="/blog/assets/index.html.d75650eb.js"><link rel="prefetch" href="/blog/assets/index.html.c5770dab.js"><link rel="prefetch" href="/blog/assets/index.html.d5122042.js"><link rel="prefetch" href="/blog/assets/index.html.c0a5e9ba.js"><link rel="prefetch" href="/blog/assets/index.html.51ae8525.js"><link rel="prefetch" href="/blog/assets/index.html.e53514d3.js"><link rel="prefetch" href="/blog/assets/index.html.09988c79.js"><link rel="prefetch" href="/blog/assets/index.html.eb108376.js"><link rel="prefetch" href="/blog/assets/index.html.2f61b3ca.js"><link rel="prefetch" href="/blog/assets/index.html.08946a35.js"><link rel="prefetch" href="/blog/assets/index.html.e695e9c9.js"><link rel="prefetch" href="/blog/assets/index.html.3d66ccdd.js"><link rel="prefetch" href="/blog/assets/index.html.1ff935f2.js"><link rel="prefetch" href="/blog/assets/index.html.a3ad1cd1.js"><link rel="prefetch" href="/blog/assets/index.html.b57762aa.js"><link rel="prefetch" href="/blog/assets/index.html.08b3a957.js"><link rel="prefetch" href="/blog/assets/index.html.9cbf2d78.js"><link rel="prefetch" href="/blog/assets/index.html.4bc70fa1.js"><link rel="prefetch" href="/blog/assets/index.html.faf16132.js"><link rel="prefetch" href="/blog/assets/demo.html.a850e9b9.js"><link rel="prefetch" href="/blog/assets/20221108.html.46471f50.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111301.html.a5e91418.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111302.html.ff7102b1.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111303.html.bd8b572a.js"><link rel="prefetch" href="/blog/assets/CSS_2022111401.html.be8e29c7.js"><link rel="prefetch" href="/blog/assets/20221108.html.9e6fc05c.js"><link rel="prefetch" href="/blog/assets/20221116.html.663a1bdb.js"><link rel="prefetch" href="/blog/assets/js01example.html.e7f57aff.js"><link rel="prefetch" href="/blog/assets/js01基础.html.2e918579.js"><link rel="prefetch" href="/blog/assets/js02域名.html.d1b1bae3.js"><link rel="prefetch" href="/blog/assets/js03保留小数.html.f3c8d2f4.js"><link rel="prefetch" href="/blog/assets/js04常用正则.html.4266e782.js"><link rel="prefetch" href="/blog/assets/js05定时器.html.444cce0c.js"><link rel="prefetch" href="/blog/assets/01相关命令.html.81697624.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111301.html.1f3a3c9d.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111302.html.db8d0905.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111303.html.3ab1d537.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111304.html.f4686d41.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111201.html.b263cecf.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111202.html.348b7b89.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111203.html.047acc5f.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111204.html.0d2896ce.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111205.html.9768009b.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111206.html.f1e0fa5e.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111207.html.9b090633.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111208.html.daad8d06.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111209.html.7fedd35c.js"><link rel="prefetch" href="/blog/assets/Vue3_2022111301.html.21fe75fc.js"><link rel="prefetch" href="/blog/assets/Vue_2022111301.html.2d5e0d45.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111301.html.60c6a791.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111302.html.751868dc.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111303.html.3fa18bdf.js"><link rel="prefetch" href="/blog/assets/vue2-10-下载文件流.html.b6206ee7.js"><link rel="prefetch" href="/blog/assets/2023.html.0936ae58.js"><link rel="prefetch" href="/blog/assets/info.html.a1a68d8b.js"><link rel="prefetch" href="/blog/assets/guide.html.8a368790.js"><link rel="prefetch" href="/blog/assets/前端技术集合.html.9ca234a3.js"><link rel="prefetch" href="/blog/assets/index.html.edaee29a.js"><link rel="prefetch" href="/blog/assets/01简介.html.5ef2778e.js"><link rel="prefetch" href="/blog/assets/Button.html.af92d008.js"><link rel="prefetch" href="/blog/assets/api.html.f4fa47e2.js"><link rel="prefetch" href="/blog/assets/home.html.e09d15f1.js"><link rel="prefetch" href="/blog/assets/home1.html.08d478e3.js"><link rel="prefetch" href="/blog/assets/home2.html.0a335270.js"><link rel="prefetch" href="/blog/assets/plugin.html.bc46a390.js"><link rel="prefetch" href="/blog/assets/theme.html.73112f00.js"><link rel="prefetch" href="/blog/assets/info.html.b09899b8.js"><link rel="prefetch" href="/blog/assets/mac上使用iterm2.html.129f6a2b.js"><link rel="prefetch" href="/blog/assets/账号网站合集.html.f39ea8dc.js"><link rel="prefetch" href="/blog/assets/面试题2022111401.html.51141716.js"><link rel="prefetch" href="/blog/assets/info.html.8f33962c.js"><link rel="prefetch" href="/blog/assets/overtime.html.6b269d77.js"><link rel="prefetch" href="/blog/assets/password.html.1ccccfa6.js"><link rel="prefetch" href="/blog/assets/project.html.1ac0116d.js"><link rel="prefetch" href="/blog/assets/实验室检测.html.811b00ea.js"><link rel="prefetch" href="/blog/assets/智慧检测平台.html.74f12da9.js"><link rel="prefetch" href="/blog/assets/跨维产品菜单整理20230203.html.d8e60b11.js"><link rel="prefetch" href="/blog/assets/404.html.761b14a0.js"><link rel="prefetch" href="/blog/assets/index.html.3156a3ca.js"><link rel="prefetch" href="/blog/assets/index.html.0ac8c580.js"><link rel="prefetch" href="/blog/assets/index.html.17c3e87f.js"><link rel="prefetch" href="/blog/assets/index.html.11c9aab7.js"><link rel="prefetch" href="/blog/assets/index.html.4e5ab5fd.js"><link rel="prefetch" href="/blog/assets/index.html.800eacc8.js"><link rel="prefetch" href="/blog/assets/index.html.65e76f2c.js"><link rel="prefetch" href="/blog/assets/index.html.3b91d0bf.js"><link rel="prefetch" href="/blog/assets/index.html.59b51092.js"><link rel="prefetch" href="/blog/assets/index.html.f939c3c1.js"><link rel="prefetch" href="/blog/assets/index.html.de2abe69.js"><link rel="prefetch" href="/blog/assets/index.html.739bd11b.js"><link rel="prefetch" href="/blog/assets/index.html.2d86bd8b.js"><link rel="prefetch" href="/blog/assets/index.html.b093f5ce.js"><link rel="prefetch" href="/blog/assets/index.html.c0a0758f.js"><link rel="prefetch" href="/blog/assets/index.html.3ec16541.js"><link rel="prefetch" href="/blog/assets/index.html.72ba4570.js"><link rel="prefetch" href="/blog/assets/index.html.67fe3a27.js"><link rel="prefetch" href="/blog/assets/index.html.28a05aba.js"><link rel="prefetch" href="/blog/assets/index.html.5342a2c2.js"><link rel="prefetch" href="/blog/assets/index.html.c1a1958b.js"><link rel="prefetch" href="/blog/assets/index.html.267fccd4.js"><link rel="prefetch" href="/blog/assets/reco-valine.ed4545b0.js"><link rel="prefetch" href="/blog/assets/Button.a2ab7687.js"><link rel="prefetch" href="/blog/assets/Demo.3e2abc15.js"><link rel="prefetch" href="/blog/assets/setupDevtools-EXVHPMXB.8c234e79.js">
    <link rel="stylesheet" href="/blog/assets/style.0a08fff0.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><div class="common-wrapper"><div><header class="navbar-container"><span class="nav-item site-brand"><a href="/blog/" class=""><img class="logo" src="/blog/images/logo.png" alt="hhのBlog"><span class="site-name can-hide">hhのBlog</span></a></span><div class="nav-item navbar-links-wrapper" style=""><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/blog/" class="nav-link" aria-label="Home"><!--[--><!--]--> Home <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/categories/ToDoList/1/" class="nav-link" aria-label="Notes"><!--[--><!--]--> Notes <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/tags/Vue/1/" class="nav-link" aria-label="Tags"><!--[--><!--]--> Tags <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/docs/" class="nav-link" aria-label="work"><!--[--><!--]--> work <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/blogs/_List/info.html" class="nav-link" aria-label="周计划清单"><!--[--><!--]--> 周计划清单 <!--[--><!--]--></a></div><!--]--></nav><a class="icon-container left btn-toggle-dark-mode" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:19px;height:19px;font-size:19px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"></path><path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0-2 2a2 2 0 0 0-2-2a2 2 0 0 0 2-2"></path><path d="M19 11h2m-1-1v2"></path></g></svg><!----></a><a class="icon-container left btn-toggle-menus" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:20px;height:20px;font-size:20px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="19" r="1"></circle><circle cx="12" cy="5" r="1"></circle></g></svg><!----></a></div></header><div class="mobile-menus-container"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/blog/" class="nav-link" aria-label="Home"><!--[--><!--]--> Home <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/categories/ToDoList/1/" class="nav-link" aria-label="Notes"><!--[--><!--]--> Notes <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/tags/Vue/1/" class="nav-link" aria-label="Tags"><!--[--><!--]--> Tags <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/docs/" class="nav-link" aria-label="work"><!--[--><!--]--> work <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/blogs/_List/info.html" class="nav-link" aria-label="周计划清单"><!--[--><!--]--> 周计划清单 <!--[--><!--]--></a></div><!--]--></nav><div class="appearance"><span>Appearance </span><a class="icon-container left btn-toggle-dark-mode" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:19px;height:19px;font-size:19px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"></path><path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0-2 2a2 2 0 0 0-2-2a2 2 0 0 0 2-2"></path><path d="M19 11h2m-1-1v2"></path></g></svg><!----></a></div></div><div class="sidebar-mask"></div><aside class="series-container"><!--[--><!--[--><section class="series-group series-item"><h5 class="series-heading active">Electron</h5><ul><li><!--[--><a href="/blog/blogs/Electron/20221108.html" class="nav-link series-item" aria-label="创建一个electron项目"><!--[--><!--]--> 创建一个electron项目 <!--[--><!--]--></a><!--]--></li><li><!--[--><a aria-current="page" href="/blog/blogs/Electron/20221115.html" class="router-link-active router-link-exact-active nav-link router-link-active series-item active" aria-label="使用预加载脚本"><!--[--><!--]--> 使用预加载脚本 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Electron/20221116.html" class="nav-link series-item" aria-label="vue项目用Electron打包"><!--[--><!--]--> vue项目用Electron打包 <!--[--><!--]--></a><!--]--></li></ul></section><!--]--><!--]--></aside><!--[--><main class="page-container show-series show-catalog"><h1 class="page-title">使用预加载脚本</h1><div class="page-info"><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="7" r="4"></circle><path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->hh<!--]--></span></a><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 3"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->2022-11-15 16:37:00<!--]--></span></a><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->前端<!--]--></span></a><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.5" cy="8.5" r="1" fill="currentColor"></circle><path d="M4 7v3.859c0 .537.213 1.052.593 1.432l8.116 8.116a2.025 2.025 0 0 0 2.864 0l4.834-4.834a2.025 2.025 0 0 0 0-2.864L12.29 4.593A2.025 2.025 0 0 0 10.859 4H7a3 3 0 0 0-3 3z"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->Electron<!--]--></span></a><!----></div><div class="theme-reco-default-content"><div><blockquote><p>在这部分的教程中，你将会了解什么是预加载脚本，并且学会如何使用预加载脚本来安全地将特权 API 暴露至渲染进程中。 不仅如此，你还会学到如何使用 Electron 的进程间通信 (IPC) 模组来让主进程与渲染进程间进行通信。</p></blockquote><h2 id="什么是预加载脚本" tabindex="-1"><a class="header-anchor" href="#什么是预加载脚本" aria-hidden="true">#</a> 什么是预加载脚本？</h2><p>Electron 的主进程是一个拥有着完全操作系统访问权限的 Node.js 环境。 除了 Electron 模组 之外，你也可以使用 Node.js 内置模块 和所有通过 npm 安装的软件包。 另一方面，出于安全原因，渲染进程默认跑在网页页面上，而并非 Node.js里。</p><p>为了将 Electron 的不同类型的进程桥接在一起，我们需要使用被称为 <strong>预加载</strong> 的特殊脚本。</p><h2 id="通过预加载脚本从渲染器访问node-js。" tabindex="-1"><a class="header-anchor" href="#通过预加载脚本从渲染器访问node-js。" aria-hidden="true">#</a> 通过预加载脚本从渲染器访问Node.js。</h2><p>预加载脚本像 Chrome 扩展的 内容脚本（Content Script）一样，会在渲染器的网页加载之前注入。 如果你想向渲染器加入需要特殊权限的功能，你可以通过 <a href="https://www.electronjs.org/zh/docs/latest/api/context-bridge" target="_blank" rel="noopener noreferrer">contextBridge<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 接口定义 全局对象。</p><p>为了演示这一概念，你将会创建一个将应用中的 Chrome、Node、Electron 版本号暴露至渲染器的预加载脚本</p><p>现在，最后要做的是输出Electron的版本号和它的依赖项到你的web页面上。</p><p>在主进程通过Node的全局 <code>process</code> 对象访问这个信息是微不足道的。 然而，你不能直接在主进程中编辑DOM，因为它无法访问渲染器 文档 上下文。 它们存在于完全不同的进程！</p><p>这是将 <strong>预加载</strong> 脚本连接到渲染器时派上用场的地方。 预加载脚本在渲染器进程加载之前加载，并有权访问两个 渲染器全局 (例如 window 和 document) 和 Node.js 环境。</p><p>新建一个 <code>preload.js</code> 文件。该脚本通过 versions 这一全局变量，将 Electron 的 process.versions 对象暴露给渲染器。 第一种</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;DOMContentLoaded&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token function-variable function">replaceText</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> text</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> element <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>selector<span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">)</span> element<span class="token punctuation">.</span>innerText <span class="token operator">=</span> text
  <span class="token punctuation">}</span>

  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> dependency <span class="token keyword">of</span> <span class="token punctuation">[</span><span class="token string">&#39;chrome&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;node&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;electron&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">replaceText</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>dependency<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-version</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> process<span class="token punctuation">.</span>versions<span class="token punctuation">[</span>dependency<span class="token punctuation">]</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>➕</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>或者 第二种</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>
<span class="token keyword">const</span> <span class="token punctuation">{</span> contextBridge <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;electron&#39;</span><span class="token punctuation">)</span>

contextBridge<span class="token punctuation">.</span><span class="token function">exposeInMainWorld</span><span class="token punctuation">(</span><span class="token string">&#39;versions&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">node</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> process<span class="token punctuation">.</span>versions<span class="token punctuation">.</span>node<span class="token punctuation">,</span>
  <span class="token function-variable function">chrome</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> process<span class="token punctuation">.</span>versions<span class="token punctuation">.</span>chrome<span class="token punctuation">,</span>
  <span class="token function-variable function">electron</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> process<span class="token punctuation">.</span>versions<span class="token punctuation">.</span>electron<span class="token punctuation">,</span>
  <span class="token comment">// 能暴露的不仅仅是函数，我们还可以暴露变量</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>➕</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code>    We are using Node.js <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>node-version<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>,
    Chromium <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>chrome-version<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>,
    and Electron <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>electron-version<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>.
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>上面的代码访问 Node.js <code>process.versions</code> 对象，并运行一个基本的 <code>replaceText</code> 辅助函数将版本号插入到 HTML 文档中。</p><p>要将此脚本附加到渲染器流程，请在你现有的 <code>BrowserWindow</code> 构造器中将路径中的预加载脚本传入 <code>webPreferences.preload</code> 选项。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token literal-property property">name</span><span class="token operator">:</span>main<span class="token punctuation">.</span>js
<span class="token comment">// include the Node.js &#39;path&#39; module at the top of your file</span>
<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;path&#39;</span><span class="token punctuation">)</span>

<span class="token comment">// modify your existing createWindow() function</span>
<span class="token keyword">const</span> <span class="token function-variable function">createWindow</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> win <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BrowserWindow</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span>
    <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">600</span><span class="token punctuation">,</span>
    <span class="token literal-property property">webPreferences</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">preload</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&#39;preload.js&#39;</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

  win<span class="token punctuation">.</span><span class="token function">loadFile</span><span class="token punctuation">(</span><span class="token string">&#39;index.html&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// ...</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这里使用了两个Node.js概念：</p><ul><li>__dirname 字符串指向当前正在执行脚本的路径 (在本例中，它指向你的项目的根文件夹)。</li><li>path.join API 将多个路径联结在一起，创建一个跨平台的路径字符串。</li></ul><p>我们使用一个相对当前正在执行JavaScript文件的路径，这样您的相对路径将在开发模式和打包模式中都将有效。</p><h3 id="额外-将功能添加到您的网页内容" tabindex="-1"><a class="header-anchor" href="#额外-将功能添加到您的网页内容" aria-hidden="true">#</a> 额外：将功能添加到您的网页内容</h3><p>此刻，您可能想知道如何为您的应用程序添加更多功能。</p><p>对于与您的网页内容的任何交互，您想要将脚本添加到您的渲染器进程中。 由于渲染器运行在正常的 Web 环境中，因此您可以在 <code>index.html</code> 文件关闭 <code>&lt;/body&gt;</code> 标签之前添加一个 <code>&lt;script&gt;</code> 标签，来包括您想要的任意脚本：</p><p>第一种方法需要配合 <code>renderer.js</code> 第二种不需要 现在渲染器能够全局访问 <code>versions</code> 了，让我们快快将里边的信息显示在窗口中。 这个变量不仅可以通过 <code>window.versions</code> 访问，也可以很简单地使用 <code>versions</code> 来访问。 新建一个 renderer.js 脚本， 这个脚本使用 <code>document.getElementById</code> DOM 接口来替换 id 属性为 info 的 HTML 元素显示文本。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token literal-property property">name</span><span class="token operator">:</span>renderer<span class="token punctuation">.</span>js
<span class="token keyword">const</span> information <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&#39;info&#39;</span><span class="token punctuation">)</span>
information<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">本应用正在使用 Chrome (v</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>versions<span class="token punctuation">.</span><span class="token function">chrome</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">), Node.js (v</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>versions<span class="token punctuation">.</span><span class="token function">node</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">), 和 Electron (v</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>versions<span class="token punctuation">.</span><span class="token function">electron</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)</span><span class="token template-punctuation string">`</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>index.html -&gt; <code>&lt;script src=&quot;./renderer.js&quot;&gt;&lt;/script&gt;</code></p><p><code>renderer.js</code> 中包含的代码可以在接下来使用与前端开发相同的 JavaScript API 和工具。例如使用 <code>webpack</code> 打包并最小化您的代码，或者使用 <code>React</code> 来管理您的用户界面。</p><h2 id="回顾" tabindex="-1"><a class="header-anchor" href="#回顾" aria-hidden="true">#</a> 回顾</h2><p>完成上述步骤后，您应该有一个功能齐全的Electron程序，如下所示：</p><p><img src="https://www.electronjs.org/zh/assets/images/simplest-electron-app-849f2d68df0c27475bfb850ed5d171a6.png" alt="img.png"></p><p>总结我们所做的所有步骤：</p><ul><li>我们启动了一个Node.js程序，并将Electron添加为依赖。</li><li>我们创建了一个 main.js 脚本来运行我们的主要进程，它控制我们的应用程序 并且在 Node.js 环境中运行。 在此脚本中， 我们使用 Electron 的 app 和 BrowserWindow 模块来创建一个浏览器窗口，在一个单独的进程(渲染器)中显示网页内容。</li><li>为了访问渲染器中的Node.js的某些功能，我们在 BrowserWindow 的构造函数上附加了一个预加载脚本。</li></ul><h2 id="在进程之间通信-【扩展-可不看】" tabindex="-1"><a class="header-anchor" href="#在进程之间通信-【扩展-可不看】" aria-hidden="true">#</a> 在进程之间通信 【扩展，可不看】</h2><p>我们之前提到，Electron 的主进程和渲染进程有着清楚的分工并且不可互换。 这代表着无论是从渲染进程直接访问 Node.js 接口，亦或者是从主进程访问 HTML 文档对象模型 (DOM)，都是不可能的。</p><p>解决这一问题的方法是使用进程间通信 (IPC)。可以使用 Electron 的 ipcMain 模块和 ipcRenderer 模块来进行进程间通信。 为了从你的网页向主进程发送消息，你可以使用 ipcMain.handle 设置一个主进程处理程序（handler），然后在预处理脚本中暴露一个被称为 ipcRenderer.invoke 的函数来触发该处理程序（handler）。</p><p>我们将向渲染器添加一个叫做 ping() 的全局函数来演示这一点。这个函数将返回一个从主进程翻山越岭而来的字符串。</p><p>首先，在预处理脚本中设置 <code>invoke</code> 调用：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token literal-property property">name</span><span class="token operator">:</span>preload<span class="token punctuation">.</span>js
<span class="token keyword">const</span> <span class="token punctuation">{</span> contextBridge<span class="token punctuation">,</span> ipcRenderer <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;electron&#39;</span><span class="token punctuation">)</span>

contextBridge<span class="token punctuation">.</span><span class="token function">exposeInMainWorld</span><span class="token punctuation">(</span><span class="token string">&#39;versions&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">node</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> process<span class="token punctuation">.</span>versions<span class="token punctuation">.</span>node<span class="token punctuation">,</span>
  <span class="token function-variable function">chrome</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> process<span class="token punctuation">.</span>versions<span class="token punctuation">.</span>chrome<span class="token punctuation">,</span>
  <span class="token function-variable function">electron</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> process<span class="token punctuation">.</span>versions<span class="token punctuation">.</span>electron<span class="token punctuation">,</span>
  <span class="token function-variable function">ping</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> ipcRenderer<span class="token punctuation">.</span><span class="token function">invoke</span><span class="token punctuation">(</span><span class="token string">&#39;ping&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token comment">// 能暴露的不仅仅是函数，我们还可以暴露变量</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="highlight-lines"><br><div class="highlight-line"> </div><br><br><br><br><br><div class="highlight-line"> </div><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container warning"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 8v4"></path><path d="M12 16h.01"></path></g></svg><p class="custom-container-title">WARNING</p><p>可以注意到我们使用了一个辅助函数来包裹 ipcRenderer.invoke(&#39;ping&#39;) 调用，而并非直接通过 context bridge 暴露 ipcRenderer 模块。 你永远都不会想要通过预加载直接暴露整个 ipcRenderer 模块。 这将使得你的渲染器能够直接向主进程发送任意的 IPC 信息，会使得其成为恶意代码最强有力的攻击媒介。</p></div><p>然后，在主进程中设置你的 handle 监听器。 我们在 HTML 文件加载之前完成了这些，所以才能保证在你从渲染器发送 invoke 调用之前处理程序能够准备就绪。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token literal-property property">name</span><span class="token operator">:</span>main<span class="token punctuation">.</span>js
<span class="token keyword">const</span> <span class="token punctuation">{</span> ipcMain <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;electron&#39;</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> <span class="token function-variable function">createWindow</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> win <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BrowserWindow</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span>
    <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">600</span><span class="token punctuation">,</span>
    <span class="token literal-property property">webPreferences</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">preload</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&#39;preload.js&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  ipcMain<span class="token punctuation">.</span><span class="token function">handle</span><span class="token punctuation">(</span><span class="token string">&#39;ping&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token string">&#39;pong&#39;</span><span class="token punctuation">)</span>
  win<span class="token punctuation">.</span><span class="token function">loadFile</span><span class="token punctuation">(</span><span class="token string">&#39;index.html&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre><div class="highlight-lines"><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>将发送器与接收器设置完成之后，现在你可以将信息通过刚刚定义的 &#39;ping&#39; 通道从渲染器发送至主进程当中。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token literal-property property">name</span><span class="token operator">:</span>renderer<span class="token punctuation">.</span>js
<span class="token keyword">const</span> <span class="token function-variable function">func</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> window<span class="token punctuation">.</span>versions<span class="token punctuation">.</span><span class="token function">ping</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token comment">// 打印 &#39;pong&#39;</span>
<span class="token punctuation">}</span>

<span class="token function">func</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="打包并分发您的应用程序" tabindex="-1"><a class="header-anchor" href="#打包并分发您的应用程序" aria-hidden="true">#</a> 打包并分发您的应用程序</h2><p>最快捷的打包方式是使用 Electron Forge。</p><h3 id="导入你的项目到-forge" tabindex="-1"><a class="header-anchor" href="#导入你的项目到-forge" aria-hidden="true">#</a> 导入你的项目到 Forge</h3><p>将 Electron Forge 的 CLI 工具包安装到项目的 <code>devDependencies</code> 依赖中，然后使用现成的转化脚本将项目导入至 <code>Electron Forge</code>。</p><ol><li>将 Electron Forge 添加到您应用的开发依赖中，并使用其&quot;import&quot;命令设置 Forge 的脚手架：</li></ol><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> --save-dev @electron-forge/cli
npx electron-forge <span class="token function">import</span>

✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json <span class="token function">file</span>
✔ Installing dependencies
✔ Writing modified package.json <span class="token function">file</span>
✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be <span class="token keyword">in</span> a <span class="token function">format</span> that electron-forge understands.

Thanks <span class="token keyword">for</span> using <span class="token string">&quot;electron-forge&quot;</span><span class="token operator">!</span><span class="token operator">!</span><span class="token operator">!</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>转换脚本完成后，Forge 会将一些脚本添加到您的 package.json 文件中。</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code>  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;start&quot;</span><span class="token operator">:</span> <span class="token string">&quot;electron-forge start&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;package&quot;</span><span class="token operator">:</span> <span class="token string">&quot;electron-forge package&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;make&quot;</span><span class="token operator">:</span> <span class="token string">&quot;electron-forge make&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>此外，您需要注意的是，package.json 的 devDependencies 下安装了一些其他的包，并且添加了一个 config.forge 字段，其中包含了一组 makers 插件配置。 Makers 是一个可以从您的源代码创建可分发文件的 Forge 插件。 您可以在现有的配置中看到多个 makers 插件，其中每个都对应着一个目标操作系统。</p></blockquote><h3 id="创建一个可分发版本" tabindex="-1"><a class="header-anchor" href="#创建一个可分发版本" aria-hidden="true">#</a> 创建一个可分发版本</h3><p>要创建可分发文件，请使用项目中的 make 脚本，该脚本最终运行了 electron-forge make 命令。</p><ol start="2"><li>使用 Forge 的 make 命令来创建可分发的应用程序：</li></ol><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token number">2</span>. <span class="token function">npm</span> run <span class="token function">make</span>

<span class="token operator">&gt;</span> my-electron-app@1.0.0 <span class="token function">make</span> /my-electron-app
<span class="token operator">&gt;</span> electron-forge <span class="token function">make</span>

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can <span class="token function">make</span> it
✔ Preparing to Package Application <span class="token keyword">for</span> arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making <span class="token keyword">for</span> the following targets: <span class="token function">zip</span>
✔ Making <span class="token keyword">for</span> target: <span class="token function">zip</span> - On platform: darwin - For arch: x64
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>该 make 命令包含两步：</p><ol><li>它将首先运行 electron-forge package ，把您的应用程序 代码与 Electron 二进制包结合起来。 完成打包的代码将会被生成到一个特定的文件夹中。</li><li>然后它将使用这个文件夹为每个 maker 配置生成一个可分发文件。</li></ol><p>在脚本运行后，您应该看到一个 out 文件夹，其中包括可分发文件与一个包含其源码的文件夹。</p><p>Electron-forge 会创建 out 文件夹，您的软件包将在那里找到：</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>// Example for macOS
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>out/make 文件夹中的应用程序应该可以启动了！ 现在，您已经创建了你的第一个 Electron 程序。</p><blockquote><p>Electron Forge 通过配置可以为不同的操作系统创建特定格式的可分发文件 (例如 DMG、deb、MSI 等)。 相关配置选项详情，请参阅 Forge 的 <a href="https://www.electronforge.io/config/makers" target="_blank" rel="noopener noreferrer">Makers<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 文档。</p></blockquote><blockquote><p>设置自定义的应用程序图标，需要添加一些额外的配置。 查看 <a href="https://www.electronforge.io/guides/create-and-add-icons" target="_blank" rel="noopener noreferrer">Forge 的图标教程<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 了解更多信息。</p></blockquote><blockquote><p>如果您想手动打包代码，或者是想了解 Electron 的打包机制，可以查看完整的 <a href="https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution" target="_blank" rel="noopener noreferrer">应用程序打包<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 文档。</p></blockquote><h2 id="重要提示-对代码进行签名" tabindex="-1"><a class="header-anchor" href="#重要提示-对代码进行签名" aria-hidden="true">#</a> 重要提示：对代码进行签名</h2><p>将桌面应用程序分发给终端用户前，我们 强烈推荐 您对 Electron 应用进行 代码签名。 代码签名是交付桌面应用程序的重要组成部分，并且它对于应用程序的自动更新功能 (将会在教程最后部分讲解) 来说是必需的。</p><p>代码签名是一种可用于证明桌面应用程序是由已知来源创建的安全技术。 Windows 和 macOS 拥有其特定的代码签名系统，这将使用户难以下载或启动未签名的应用程序。</p><p>如果您已经拥有适用于 Windows 和 macOS 的代码签名证书，可以直接添加到 Forge 配置中。 否则，请参阅完整的 代码签名 文档以了解证书购买以及应用程序代码签名的详细流程。</p><p>在 macOS 上，代码签名是在应用程序打包时完成的。 而在 Windows 中，则是对可分发文件进行签名操作。 macOS:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>name:package.json
{
  //...
  &quot;config&quot;: {
    &quot;forge&quot;: {
      //...
      &quot;packagerConfig&quot;: {
        &quot;osxSign&quot;: {
          &quot;identity&quot;: &quot;Developer ID Application: Felix Rieseberg (LT94ZKYDCJ)&quot;,
          &quot;hardened-runtime&quot;: true,
          &quot;entitlements&quot;: &quot;entitlements.plist&quot;,
          &quot;entitlements-inherit&quot;: &quot;entitlements.plist&quot;,
          &quot;signature-flags&quot;: &quot;library&quot;
        },
        &quot;osxNotarize&quot;: {
          &quot;appleId&quot;: &quot;felix@felix.fun&quot;,
          &quot;appleIdPassword&quot;: &quot;this-is-a-secret&quot;
        }
      }
      //...
    }
  }
  //...
}
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Windows</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>{
  //...
  &quot;config&quot;: {
    &quot;forge&quot;: {
      //...
      &quot;makers&quot;: [
        {
          &quot;name&quot;: &quot;@electron-forge/maker-squirrel&quot;,
          &quot;config&quot;: {
            &quot;certificateFile&quot;: &quot;./cert.pfx&quot;,
            &quot;certificatePassword&quot;: &quot;this-is-a-secret&quot;
          }
        }
      ]
      //...
    }
  }
  //...
}
</code></pre><div class="highlight-lines"><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="摘要" tabindex="-1"><a class="header-anchor" href="#摘要" aria-hidden="true">#</a> 摘要</h2><p>Electron 应用程序需要打包后分发给用户。 在本教程中，您将应用程序导入 Electron Forge 并对其进行配置以打包您的应用程序并生成安装程序。</p><p>为了让应用程序受到用户系统的信任，您需要以数字签名证明可分发文件的内容是真实的并且未被代码签名篡改。 只要在应用配置中添加签名证书信息，您就可以通过 Forge 对其进行签名。</p><h2 id="发布和更新" tabindex="-1"><a class="header-anchor" href="#发布和更新" aria-hidden="true">#</a> 发布和更新</h2><p>Electron 官方在 <a href="https://update.electronjs.org/" target="_blank" rel="noopener noreferrer">https://update.electronjs.org<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 上为开源应用程序提供了免费的自动更新服务。 使用它有以下几点要求：</p><p>你的应用在 macOS 或 Windows 上运行<br> 你的应用有一个公开的 GitHub 仓库<br> 应用程序需要发布到 <a href="https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository" target="_blank" rel="noopener noreferrer">GitHub releases<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 中<br> 应用程序需要完成 <a href="https://www.electronjs.org/zh/docs/latest/tutorial/code-signing" target="_blank" rel="noopener noreferrer">签名<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a><br> 至此，我们假设你已将所有代码推送到公开的 GitHub 仓库。</p><h2 id="发布一个-github-版本" tabindex="-1"><a class="header-anchor" href="#发布一个-github-版本" aria-hidden="true">#</a> 发布一个 GitHub 版本</h2><p>Electron Forge 的 Publisher 插件可以自动将打包的应用程序分发到各种来源。 在本教程中，我们将演示使用 GitHub Publisher 将代码发布到 GitHub releases 中。</p><h3 id="生成个人访问令牌" tabindex="-1"><a class="header-anchor" href="#生成个人访问令牌" aria-hidden="true">#</a> 生成个人访问令牌</h3><p>Forge cannot publish to any repository on GitHub without permission. You need to pass in an authenticated token that gives Forge access to your GitHub releases. The easiest way to do this is to create a new personal access token (PAT) with the public_repo scope, which gives write access to your public repositories. Make sure to keep this token a secret.</p><h3 id="设置-github-发布者" tabindex="-1"><a class="header-anchor" href="#设置-github-发布者" aria-hidden="true">#</a> 设置 GitHub 发布者</h3><h4 id="安装模块" tabindex="-1"><a class="header-anchor" href="#安装模块" aria-hidden="true">#</a> 安装模块</h4><p>Forge&#39;s GitHub Publisher is a plugin that needs to be installed in your project&#39;s devDependencies:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> --save-dev @electron-forge/publisher-github
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="在-forge-中配置发布者" tabindex="-1"><a class="header-anchor" href="#在-forge-中配置发布者" aria-hidden="true">#</a> 在 Forge 中配置发布者</h4><div class="language-test ext-test line-numbers-mode"><pre class="language-test"><code>{
  //...
  &quot;config&quot;: {
    &quot;forge&quot;: {
      &quot;publishers&quot;: [
        {
          &quot;name&quot;: &quot;@electron-forge/publisher-github&quot;,
          &quot;config&quot;: {
            &quot;repository&quot;: {
              &quot;owner&quot;: &quot;github-user-name&quot;,
              &quot;name&quot;: &quot;github-repo-name&quot;
            },
            &quot;prerelease&quot;: false,
            &quot;draft&quot;: true
          }
        }
      ]
    }
  }
  //...
}
</code></pre><div class="highlight-lines"><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置身份验证-token" tabindex="-1"><a class="header-anchor" href="#设置身份验证-token" aria-hidden="true">#</a> 设置身份验证 token</h4><p>You also need to make the Publisher aware of your authentication token. By default, it will use the value stored in the GITHUB_TOKEN environment variable.</p><h3 id="运行发布命令" tabindex="-1"><a class="header-anchor" href="#运行发布命令" aria-hidden="true">#</a> 运行发布命令</h3><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>  //...
  &quot;scripts&quot;: {
    &quot;start&quot;: &quot;electron-forge start&quot;,
    &quot;package&quot;: &quot;electron-forge package&quot;,
    &quot;make&quot;: &quot;electron-forge make&quot;,
    &quot;publish&quot;: &quot;electron-forge publish&quot;
  },
  //...
</code></pre><div class="highlight-lines"><br><br><br><br><br><div class="highlight-line"> </div><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> run publish
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="检测更新程序代码" tabindex="-1"><a class="header-anchor" href="#检测更新程序代码" aria-hidden="true">#</a> 检测更新程序代码</h2><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> update-electron-app
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token literal-property property">name</span><span class="token operator">:</span>main<span class="token punctuation">.</span>js
<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;update-electron-app&#39;</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div></div></div><footer class="page-meta"><div class="meta-item edit-link"><a class="icon-container left meta-item-label" href="https://gitee.com/i77ing/blog.git/edit/master/blogs/Electron/20221115.md" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:20px;height:20px;font-size:20px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-3"></path><path d="M9 15h3l8.5-8.5a1.5 1.5 0 0 0-3-3L9 12v3"></path><path d="M16 5l3 3"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->Edit this page<!--]--></span></a></div><div class="meta-item last-updated"><a class="icon-container left meta-item-label" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:20px;height:20px;font-size:20px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.795 21H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4"></path><circle cx="18" cy="18" r="4"></circle><path d="M15 3v4"></path><path d="M7 3v4"></path><path d="M3 11h16"></path><path d="M18 16.496V18l1 1"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->Last Updated 2023-02-23 19:57:37<!--]--></span></a></div></footer><nav class="page-nav"><p class="hasPrev hasNext inner"><span class="page-nav-item prev"> ← 创建一个electron项目</span><span class="page-nav-item next">vue项目用Electron打包 → </span></p></nav><!----></main><!--]--><div class="page-catalog-container"><h5 class="tip">ON THIS PAGE</h5><ul><!--[--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221115.html#什么是预加载脚本" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="什么是预加载脚本？"><!--[--><!--]--> 什么是预加载脚本？ <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221115.html#通过预加载脚本从渲染器访问node-js。" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="通过预加载脚本从渲染器访问Node.js。"><!--[--><!--]--> 通过预加载脚本从渲染器访问Node.js。 <!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Electron/20221115.html#额外-将功能添加到您的网页内容" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="额外：将功能添加到您的网页内容"><!--[--><!--]--> 额外：将功能添加到您的网页内容 <!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221115.html#回顾" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="回顾"><!--[--><!--]--> 回顾 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221115.html#在进程之间通信-【扩展-可不看】" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="在进程之间通信 【扩展，可不看】"><!--[--><!--]--> 在进程之间通信 【扩展，可不看】 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221115.html#打包并分发您的应用程序" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="打包并分发您的应用程序"><!--[--><!--]--> 打包并分发您的应用程序 <!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Electron/20221115.html#导入你的项目到-forge" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="导入你的项目到 Forge"><!--[--><!--]--> 导入你的项目到 Forge <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Electron/20221115.html#创建一个可分发版本" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="创建一个可分发版本"><!--[--><!--]--> 创建一个可分发版本 <!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221115.html#重要提示-对代码进行签名" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="重要提示：对代码进行签名"><!--[--><!--]--> 重要提示：对代码进行签名 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221115.html#摘要" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="摘要"><!--[--><!--]--> 摘要 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221115.html#发布和更新" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="发布和更新"><!--[--><!--]--> 发布和更新 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221115.html#发布一个-github-版本" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="发布一个 GitHub 版本"><!--[--><!--]--> 发布一个 GitHub 版本 <!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Electron/20221115.html#生成个人访问令牌" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="生成个人访问令牌"><!--[--><!--]--> 生成个人访问令牌 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Electron/20221115.html#设置-github-发布者" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="设置 GitHub 发布者"><!--[--><!--]--> 设置 GitHub 发布者 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Electron/20221115.html#运行发布命令" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="运行发布命令"><!--[--><!--]--> 运行发布命令 <!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221115.html#检测更新程序代码" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="检测更新程序代码"><!--[--><!--]--> 检测更新程序代码 <!--[--><!--]--></a></li><!--]--><!--]--></ul></div></div></div></div><!----><!----><!--]--></div>
    <script type="module" src="/blog/assets/app.af94fc38.js" defer></script>
  </body>
</html>
